<template>
	<div>
		<ma-body>
			<ma-refresh slot="content">
				<image src="@/static/img/isBack.png" mode="aspectFill" class="backImg" @tap="toBack"></image>
				<div style="text-align: center;">
					<div style="text-align: center;width: 100%;position: relative;">
						<image src="@/static/img/museumDetailBg.png" mode="aspectFill" class="bg-img"></image>
						<image :src="theme" mode="aspectFill" class="selectImg"></image>
					</div>
					<span class="title">默认主题</span>
				</div>
				
				<div class="list-box">
					<div style="width: 100%;display: flex;justify-content: center;padding-bottom: 3.73vw;">
						<image src="../../../static/img/enter16.png" mode="aspectFill" class="image427" style="transform: rotate(90deg);"></image>
					</div>
					<div class="item-box" v-for="item in themeList">
						<div style="padding: 12.8vw 0;background-color: #272727;border-radius: 6.4vw 6.4vw 0 0;text-align: center;">
							<image :src="item.img" mode="aspectFill" style="width: 91.47;height: 17.07vw;"></image>
						</div>
						<div class="iteminfo-box">
							<span class="jiu-font32-fff">默认主题1</span>
							<span class="btn" :class="{'btn': item.hasChoose == 1, 'select':item.hasChoose == null}">{{ text(item.hasChoose) }}</span>
						</div>
					</div>
				</div>
			</ma-refresh> 
		</ma-body>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				themeList: [],
				theme: ''
			}
		},
		methods: {
			async getCollectionThemeList(){
				let res = await this.$u.api.getCollectionThemeList();
				this.themeList = res;
				res.forEach(e=>{
					if(e.hasChoose == 1){
						this.theme = e.img;
					}
				})
			}
		},
		onLoad() {
			this.getCollectionThemeList();
		},
		computed:{
			text(){
				return item=>{
					console.log('5277468',item)
					if(item == 1) return '已使用';
					else return '选择'
				}
			}
		}
	}
</script>

<style lang="scss">
	.image427{
		width: 4.27vw;
		height: 4.27vw;
		display: block;
	}
	.bg-img{
		width: 100vw;
		height: 51.87vw;
		// background-color: red;
	}
	.selectImg{
		display: block;
		width: 91.47vw;
		height: 28.8vw;
		position: absolute;
		top: 16.8vw;
		left: 4.27vw;
	}
	.title{
		font-size: 5.87vw;
		font-weight: 500;
		color: #fff;
		margin-bottom: 10.93vw;
		display: block;
	}

	.list-box{
		padding: 6.4vw 4.27vw 6.4vw 4.27vw;
		background-color: #1b1b1b;
		border-radius: 6.4vw 6.4vw 0 0;
		.item-box{
			width: 100%;
			border-radius: 6.4vw;
			margin-top: 2.67vw;
			
			.iteminfo-box{
				padding: 5.6vw 4.27vw 5.6vw 6.4vw;
				background-color: #000;
				border-radius: 0 0 6.4vw 6.4vw;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			
			.btn{
				display: block;
				width: 17.07vw;
				line-height: 8.53vw;
				border-radius: 5.33vw;
				background: #555555;
				box-shadow: 0vw 1vw 2vw rgba(71,12,114,0.48);
				font-size: 3.2vw;
				color: #000;
				font-weight: 500;
				text-align: center;
			}
			
			.select{
				background: #A972FF;
				color: #000;
				box-shadow: 0vw 1vw 2vw rgba(71,12,114,0.48);
			}
		}
	}
</style>